<template>
  <div class="reportquery-data">
    <el-card style="position: relative;">
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <table-list
        id="tableExcel"
        :table="table"
        ref="tableList"
        @handleEdit="handleEdit"
        @handleSee="handleDele"
      >
      </table-list>
    </el-card>
    <el-dialog
      :title="editDialog.title"
      v-if="editDialog.visible"
      :visible.sync="editDialog.visible"
      @close="closeDialog('editDialog')"
      width="40%"
      top="10vh"
    >
      <el-form
        :model="editDialog.data"
        ref="editDialog.data"
        label-width="110px"
      >
        <el-form-item label="污染类型">
          <el-input v-model="pollutename" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          size="small"
          plain
          @click="closeDialog('editDialog')"
        >取 消</el-button>
        <el-popover
          class="edit-dialog-popover"
          placement="top"
          v-model="editDialog.submitVisible"
        >
          <p style="text-align: center; margin-top: 0; color:#409eff">
            确定提交吗？
          </p>
          <div style="text-align: center">
            <el-button
              size="mini"
              @click="editDialog.submitVisible = false"
              v-text="'取 消'"
              plain
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              @click="handleSubmit"
              plain
              id="btn"
            />
          </div>
          <el-button
            slot="reference"
            type="primary"
            size="small"
            v-text="'提 交'"
            plain
          />
        </el-popover>
      </span>
    </el-dialog>
    <el-dialog
      :title="seeDialog.title"
      v-if="seeDialog.visible"
      :visible.sync="seeDialog.visible"
      @close="closeseeDialog('seeDialog')"
      width="40%"
      top="10vh"
    >
      <el-form
        :model="seeDialog.data"
        ref="seeDialog.data"
        label-width="110px"
      >
        <el-form-item label="污染类型">
          <el-input v-model="polluteName" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="详细内容">
          <el-input v-model="polluteDesc" size="mini" type="textarea"></el-input>
        </el-form-item>
      </el-form>
     <span slot="footer">
        <el-button
          size="small"
          plain
          @click="closeseeDialog('seeDialog')"
        >取 消</el-button>
        <el-popover
          class="edit-dialog-popover"
          placement="top"
          v-model="seeDialog.submitVisible"
        >
          <p style="text-align: center; margin-top: 0; color:#409eff">
            确定提交吗？
          </p>
          <div style="text-align: center">
            <el-button
              size="mini"
              @click="seeDialog.submitVisible = false"
              v-text="'取 消'"
              plain
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              @click="seeSubmit"
              plain
              id="btn"
            />
          </div>
          <el-button
            slot="reference"
            type="primary"
            size="small"
            v-text="'提 交'"
            plain
          />
        </el-popover>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
import TableList from "../../components/Table/TableList";
import TableProps from "../../utils/tableProps.js";
import HSurvey from "./Hsurveyquery"
export default {
  name: "ReportQuery",
  components: {
    ToolsBtn,
    TableList
  },
  data() {
    return {
      table: TableProps,
      toolsData: {
        title: "举报类型查询",
        datatimefier: false,
        datatime: '',
        identifier: false,
        content: "请输入设备号",
        query: '',
        oBtnShow: [
          { btn0: true }, // 新增按钮
          { btn1: false }, // 刷新按钮
          { btn2: false }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: false } // 导出Excel按钮
        ]
      },
      editDialog: {
        title: "添加",
        visible: false,
        submitVisible: false,
        data: null
      },
      pollutename: '',
      seeDialog: {
        title: "添加",
        visible: false,
        submitVisible: false,
        data: null
      },
      typeId: '',
      polluteName: '',
      polluteDesc: ''
    }
  }, 
  created(){
    this.table.tHead = HSurvey;
    this.table.identifier = true;
    this.table.hasExpand = true;
    this.table.hasOperation = false;
    this.table.hasOperation = true;
    this.table.operation.data = [
      {
        id: 1,
        label: "添 加",
        Fun: "handleEdit",
        btnType: "text",
        plain: false,
        size: "mini",
        className: "handleEdit"
      },
      {
        id: 2,
        label: "编 辑",
        Fun: "handleSee",
        btnType: "text",
        plain: false,
        size: "mini",
        className: "handleSee"
      }
    ];
    this.getList()
  },
  methods: {
    //列表
    getList(){
      this.table.data = [];
      this.table.loading = true;
      this.$api.PROTECTION.REPORTQURRY()
      .then(res => {
        console.log(res)
        this.table.data = res.data.data;
        this.table.loading = false;
      })
      .catch(err => {
        console.log(err)
      })
    },
    // 编辑
    handleEdit(index, row){
      console.log(row)
      this.seeDialog.visible = true;
      this.seeDialog.submitVisible = true;
      this.typeId = row.id
    },
    seeSubmit(){
      const params = {
        id: this.typeId,
        pollutename: this.polluteName,
        pollutedesc: this.polluteDesc
      }
      console.log(params)
    },
    // 删除
    handleDele(){

    },
    // 新增数据
    addData() {
      // console.log("新 增");
      this.editDialog.visible = true;
      this.editDialog.submitVisible = true;
    },
    handleSubmit(){
      console.log(this.pollutename)
      const params = {
        pollutename: this.pollutename,
        pid: 0
      }
      this.$api.PROTECTION.REPORTADD(params)
      .then(res => {
        console.log(res)
        this.getList();
        this.$message({
          showClose: true,
          message: '添加成功成功',
          type: 'success'
        });
        this.editDialog.visible = false;
      })
      .catch(err => {
        console.log(err)
      })
    },
     // 关闭模态框
    closeDialog(name){
      if(name === "editDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    closeseeDialog(name){
      if(name === "seeDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    // 列表数据刷新
    refresh() {
      // console.log("刷 新");
      this.getList(1,50)
    },
    // 搜索
    search() {
      // console.log("搜索");
    },
     // 字段设置
    fieldSet() {
      // console.log("字段设置");
    },
    // 隐藏表格操作列
    hasOperation() {
      // console.log("隐藏表格操作列");
      this.table.hasOperation = !this.table.hasOperation;
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog__title{
  font-size: 12px;
}
/deep/.el-form-item__label{
  font-size: 12px;
}
/deep/ .handleSee{
  color: #66c33a;
}
</style>


